<div class="container" *ngIf="profile.privilege.classControl">
  <ion-item color="none">
    <ion-button fill="clear" (click)="prevPage()" 
      [disabled]="dc.selectedDoc?.disable || dc.selectedDoc?.pageNum === 1">
      <ion-icon slot="icon-only" name="chevron-back"></ion-icon>
    </ion-button>
    <ion-label>{{dc.selectedDoc?.pageNum}} / {{dc.selectedDoc?.numPages}}</ion-label>
    <ion-button fill="clear" (click)="nextPage()" 
      [disabled]="dc.selectedDoc?.disable || dc.selectedDoc?.pageNum === dc.selectedDoc?.numPages">
      <ion-icon slot="icon-only" name="chevron-forward"></ion-icon>
    </ion-button>
  </ion-item>
  <ion-item color="none">
    <ion-button fill="clear" (click)="zoomIn()">
      <ion-icon slot="icon-only" name="remove"></ion-icon>
    </ion-button>
    <ion-label>{{dc.selectedDoc?.zoom|percent}}</ion-label>
    <ion-button fill="clear" (click)="zoomOut()">
      <ion-icon slot="icon-only" name="add"></ion-icon>
    </ion-button>
  </ion-item>
  <ion-item *ngIf="dc.selectedDoc?.numPages > 1" color="none">
    <ion-button color="light" (click)="dc.selectedDoc.docList = !(dc.selectedDoc.docList)">
      <ion-icon name="grid"></ion-icon>
    </ion-button>
  </ion-item>
</div>